<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>作业3 当当网购物车</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.content {
				margin: 0 auto;
				margin-top: 10px;
				background: ;
				width: 810px;
			}
			
			.clearfix {
				display: table;
				clear: both;
				content: "";
			}
			
			.fl {
				float: left;
			}
			
			.fr {
				float: right;
			}
			
			.logo {
				background: ;
				width: 100%;
				height: 49px;
			}
			
			h4 {
				
				font-weight: 600;
				font-size: 14px;
				background: rgb(255, 0, 0);
				color: white;
				padding: 4px 12px;
				margin-top: 12px;
				margin-right: 10px;
				border-radius: 8px;
				text-align: center;
				
				cursor: pointer;
			}
			
			.list {
				position: relative;
			}
			
			.list h4 {
				position: absolute;
				bottom: 34px;
				right: 0px;
				border-radius: 0px;
				padding: 6px 20px;
			}
			
			.option {
				font-size: 11px;
				color: rgb(102, 102, 102);
				text-align: center;
				position: absolute;
				right: 30px;
				top: 114px;
				cursor: pointer;
			}
			
			.option p {
				margin-bottom: 10px;
			}
			
			.option2 {
				top: 224px;
			}
		</style>
	</head>

	<body>
		<div class="content clearfix">
			<div class="logo">
				<img src="dd_logo.jpg" class="p1" />
				<h4 class="fr" onclick="closeThis()">关闭</h4>
			</div>

			<div class="list">
				<img src="shoppingBg.jpg" class="p2" />
				<h4 class="fr" onclick="sum()">结算</h4>
				<div class="option option1 fr">
					<p onclick="collect()">移入收藏夹</p>
					<p onclick="del()">删除</p>
				</div>

				<div class="option option2 fr">
					<p onclick="collect()">移入收藏夹</p>
					<p onclick="del()">删除</p>
				</div>
			</div>
		</div>

		<script>
			function closeThis() {
				if(confirm("确认关闭？")) {
					window.close();
				}
			};

			function sum() {
				if(confirm("您本次购买的商品信息如下：\n\n商品名称：白岩松：白说、岛上书店；\n商品数量：2件；\n商品总计：46.00；\n运费：0元；\n\n请确认以上信息是否有误！！！")){
					alert("您的订单已提交");
				}
			}
			function collect() {
				if(confirm("移入收藏后，将不在购物车显示，是否继续操作？")){
					alert("移入收藏夹成功！");
				}
			}
			function del() {
				if(confirm("您确定要删除商品么？")){
					alert("删除成功！");
				}
			}
			
		</script>
	</body>

</html>